<template>
    <div class="latestMusic">
        <h3>最新音乐</h3>
        <div class="songlist" ref="songlist">
            <ul class="content" ref="content">
                <li v-for="item in latestMusicData" :key="item.id">
                    <div class="song">
                        {{item.name}}
                        <span>{{item.song.alias[0]}}</span>
                        <p>{{item.song.artists[0].name}} - {{item.song.album.name}}</p>
                    </div>
                    <div class="line"></div>
                </li>
            </ul> -->
        </div>
        <!-- sjfkasfhesu -->
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        data(){
            return{
              latestMusicData:[] 
            }
        },
        mounted(){
            this.getLatestMusic()
        },
        methods:{
            getLatestMusic(){
                axios.get("/api/personalized/newsong")
                .then(res => {
                    console.log(res.data.result)
                    this.latestMusicData=res.data.result
                })
                .catch(err => {
                    console.error(err); 
                })
            }
        },
        
    }
</script>
<style scoped>
    .latestMusic{
        width: 90%;
        margin: 0 auto;
        padding: 2px ;
    }
    .latestMusic>h3{
        text-align: left;
    }
    .songlist{
        overflow: hidden;
    }
    .song{
        text-align: left;
        font-size: 18px;
        white-space: nowrap; 
        text-overflow:ellipsis; 
        overflow:hidden;
    }
    .song>span{
        color: darkgrey;
    }
    .song>p{
        font-size: 15px;
        color: darkgrey;
        margin-top: 4px;
        margin-bottom: 6px;
    }
    .line{
        width: 100%;
        height: 1px;
        background-color: rgb(235, 235, 235);
        margin-bottom: 6px;
    }
    

   
</style>